<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript" src="markerwithlabel.js" ></script>
<script type="text/javascript" src="mapa.js" ></script>
<style type="text/css">
  .labels {
    color: red;
    background-color: white;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    width: 80px;     
    border: 2px solid black;
    white-space: nowrap;
  }
</style>

</head>
<body onload="initialize();">
	<input type="button" onclick="exibirTodas('T')" value="Exibir Todas"/>
	<input type="button" onclick="exibirClaros()" value="Claros"/>
	<input type="button" onclick="exibirEscuros()" value="Escuros"/>
	<input type="button" onclick="exibirEspeciais()" value="Especiais"/>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>